<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>赛事</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/competition.css?v=1" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script> 
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/mod.js"></script>
	</head>
	<body class="style-three">
		<div id="box" style="padding-bottom: 50px"></div>
		<script id="test" type="text/html">
			<div class="banner">
				<img src="<%=result.matchInfo.banner_src%>" />
			</div>
			<!-- banner区域 -->
			<section class="apply">
				<h6>
					<span id="jc"></span>
					<%if (result.matchInfo.menu_items.indexOf('4')!=-1){%>
					<%if (result.matchInfo.introduce_type==1){%>
						<a href="{$staticHost}/show/matchIntroduce?match_id={$match_id}">说明<img src="{$staticHost}/static/images/icon/fast@2x.png"/></a>
					<%}%>
					<%if (result.matchInfo.introduce_type==0){%>
						<a href="<%=result.matchInfo.introduce_url%>">说明  <img src="{$staticHost}/static/images/icon/fast@2x.png"/></a>
					<%}%>
					<%}%>
				</h6>
				<div class="bar">
					<span id="one" class="gray"></span>
					<span id="two" class="gray"></span>
					<span id="three" class="gray"></span>
					<p id="bar-line"></p>
				</div>
				<!-- 进度条 -->
				<div class="time"><%=result.matchInfo.stime%> - <%=result.matchInfo.etime%></div>
				<!-- 赛事时间 -->
				<ul>
					<li id="gr">
						<a class="nlogin me">我要报名</a>
						<!-- <span class="add"><%=result.matchInfo.user_count %></span>人参加
						<h1>个人目标：</h1> -->
						<%if(!result.matchInfo.aim_desc){%>
						<%for(var i=0;i< result.matchInfo.rule.user_rule.length; i++) {%>
							<%for(var j=0;j< result.matchInfo.rule.user_rule[i].length; j++){%>
								<p class="target">
								<%=result.matchInfo.rule.user_rule[i][j].rate%>
								<%=result.matchInfo.rule.user_rule[i][j].value%>
								<%=result.matchInfo.rule.user_rule[i][j].unit%>
								<%if(j!=result.matchInfo.rule.user_rule[i].length-1){%>
									且
								<%}%>
								</p>
							<%}%>
							<%if(i!=result.matchInfo.rule.user_rule.length-1){%>
								或
							<%}%>
						<%}%>
						<%}%>
						<!-- 且或规则 -->
					</li>
					<li id="qz">
						<a class="nlogin group">群组报名</a>
						<!-- <span class="addg"><%=result.matchInfo.group_count%></span>群组参加
						<h1>群组目标：</h1> -->

						<%if(!result.matchInfo.aim_desc){%>
						<%for(var i=0;i< result.matchInfo.rule.group_rule.length; i++) {%>
							<%for(var j=0;j< result.matchInfo.rule.group_rule[i].length; j++){%>
								<p class="target">
								<%=result.matchInfo.rule.group_rule[i][j].rate%>
								<%=result.matchInfo.rule.group_rule[i][j].value%>
								<%=result.matchInfo.rule.group_rule[i][j].unit%>
								<%if(j!=result.matchInfo.rule.group_rule[i].length-1){%>
									且
								<%}%>
								</p>
							<%}%>
							<%if(i!=result.matchInfo.rule.group_rule.length-1){%>
								或
							<%}%>
						<%}%>
						<%}%>
					</li>
				</ul>
				<p class="target-aim"><%=result.matchInfo.aim_desc%></p>
				<!-- 报名人数 及目标 and 且或 -->
				<p class="count">
					<b>距离赛事开始还有：</b>
					<span id="t_d"></span> 天 
					<span id="t_h"></span> 小时 
					<span id="t_m"></span> 分
				</p>
				<!-- 赛事开始倒计时 -->

				<div class="a-list">
					<%if (result.matchInfo.menu_items.indexOf('1')!=-1){%>
					<a class="nlogin rank" href="{$staticHost}/show/matchRank?match_id={$match_id}">数据排行</a>
					<%}%>
					<%if (result.matchInfo.menu_items.indexOf('4')!=-1){%>
					<%if (result.matchInfo.introduce_type==1){%>
						<a href="{$staticHost}/show/matchIntroduce?match_id={$match_id}">比赛说明</a>
					<%}%>
					<%if (result.matchInfo.introduce_type==0){%>
						<a href="<%=result.matchInfo.introduce_url%>">比赛说明</a>
					<%}%>
					<%}%>
					<%if (result.matchInfo.menu_items.indexOf('2')!=-1){%>
					<a class="nlogin data" href="{$staticHost}/show/matchCertificate?match_id=<%=result.matchInfo.match_id%>">成绩证书</a>
					<%}%>
					<%if (result.matchInfo.menu_items.indexOf('3')!=-1){%>
					<a class="nlogin" href="{$staticHost}/show/orderDetail?order_id=<%=result.order_id%>">我的订单</a>
					<%}%>
					<%if (result.matchInfo.menu_items.indexOf('0')!=-1){%>
					<a class="nlogin info">报名信息</a>
					<%}%>
				</div>
				<!-- 按钮显示区域 -->
			</section>
			<!-- 报名 -->
			<div class="p10 ac f13">
				<i class=" color_gray">本活动最终解释权归虎扑跑步所有</i>
			</div>
		    <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
		    	下载虎扑跑步APP参加 精彩活动
		    </a>
		
		<div id="forlogin" class="c-mask" style="display: none;">
			<section class="pop-commodity" style="display: none;">
				<span class="close">×</span>
				<div class="commodity">
					<img class="imgtk" src="">
					<p class="tkspn"> </p>
					<span class="pricetk"></span>
				</div>
				<p class="tkms"></p>
				<div class="num">
					购买数量<br/>
					<input class="min" id="goodsMin" type="button" value="-" onclick="cal(this,'-')" />
					<input class="text_box" disabled="disabled" id="goodsNum" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  type="text" value="1" />
					<input class="add" id="goodsAdd" type="button" value="+" onclick="cal(this,'+')" />
				</div>
				<input class="bg_blue color-white f18" id="confirm" type="button" onclick="total()" value="确 定"/>
			</section>
			<section class="pop-up" style="">
				<span class="close">×</span>
				<div class="login-pop" style="display: none;">
					<h1>
						<p>
						<i class="left-line"></i>
						登录后，继续操作
						<i class="right-line"></i>
						</p>
					</h1>
					<form id="infoForm" enctype="" method="post" action="{$staticHost}/connect/login">
						<input  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"placeholder=" 请填写您的手机号"  type="text" name="phone"/>
						<input placeholder=" 请输入登录密码"  type="password" name="pwd"/>
						<input type="submit" value="登录"/>
                        <br>
                        <span class="color_gray lh30">
	                        如无账号，请下载
	                        <a class="color-red" href="http://mobile.hupu.com/download/joggers?r=share">虎扑跑步APP</a>
	                        并绑定手机
                        </span>
					</form>
				</div>
				<!-- 登录弹框 -->
				<%if(uid){%>
				
				<div class="failure-pop"style="display: none;">
					<p class="f16">小主，故障了</p>
				</div>
				<div class="no-pop"style="display: none;">
					<p class="f16"></p>
				</div>
				
				<%if (result.matchInfo.match_type!=0){%>
				<div class="applyg-pop" style="display: none">
                    <%if(!groups.length){%>
                    <p style="font-size:18px">您还没有创建群组</p>
                    <p style="font-size:18px">快去通知群主报名吧</p>
                    <input id="qzbm" type="submit" onClick='$("#forlogin").hide();' value="知道了"/>
                    <%}else{%>
					<h1>
						<p>
							<i class="left-line"></i>
							群组报名
							<i class="right-line"></i>
						</p>
					</h1>
					<input id="inValue" type="hidden" value=""/>
					<div id="select-mod">选择有权限管理的群组</div>
					<ul class="select" style="display: none;">
					<% for(var i=0; i< groups.length ;i++) { %>
						<li data-gid="<%=groups[i].gid%>"><%=groups[i].name%></li>
					<%}%>	
					</ul>
					<input id="qzbm" type="botton" value="提交" onclick="total()"/>
                    <%}%>
				</div>
				<%}%>	
				<!-- 群组报名 -->
				<div class="applyg-info" style="display: none">
					<%if (result.matchInfo.match_type!=1&&result.addInfo.status==1){%>
						<h1>
							<p>
								<i class="left-line"></i>
								个人报名信息
								<i class="right-line"></i>
							</p>
						</h1>
						
						<input disabled='disabled' placeholder="<%=result.addInfo.name%>"  type="text" value="<%=result.addInfo.name%>"/>
						<input disabled='disabled' placeholder="<%=result.addInfo.phone%>"  type="text" value="<%=result.addInfo.phone%>"/>
				<%}%>
 					<!-- 个人报名信息显示 -->
					<%if (result.matchInfo.match_type!=0&&result.addInfo.group_add_info.length>0){%>
						<h1 class="pt20">
							<p>
								<i class="left-line"></i>
								群组报名信息
								<i class="right-line"></i>
							</p>
						</h1>
						<div style="max-height:180px;overflow-y: scroll;">
						<% for(var i=0; i<result.addInfo.group_add_info.length; i++){%>
						    <input disabled='disabled' value="群组名称：<%=result.addInfo.group_add_info[i].group_name%>" type="text" />
						<%}%>
						</div>
					<%}%>
					<!-- 群组报名信息显示 -->
				</div>
				<%}%>
				<!-- 报名信息 -->

			</section>
		</div>
	</script>
	<!-- 赛事报名相关模板 -->
	<!-- 订单模板 -->
	</body>
	<script>
	var s=0;
	var match_id = "{$match_id}";
	var uid = "{$uid}";
	var groups = [];
	var sup = typeof jw === "object";
	//var timestamp = Date.parse(new Date()).toString();
	//timestamp = timestamp.substr(0,10)
	$(function(){
		$.getJSON("{$staticHost}/groupWeb/myManageGroup", {}, function(data, error) {
			if(data.result && data.result.groups){
				groups = data.result.groups;
			}
		});
	
		$.getJSON("{$staticHost}/matchWeb/matchInfo", {match_id:match_id}, function(data, error) {
		
			var info=data.result.matchInfo;
			var infoM=data.result.addInfo;
			data.uid = uid;
			data.groups = groups;
			var d = new Date(parseInt(info.stime) * 1000);
		info.stime =d.getFullYear()+"."+xs(d.getMonth()+1)+"."+xs(d.getDate())+ " "+xs( d.getHours())+":"+xs(d.getMinutes());

		var q = new Date(parseInt(info.etime) * 1000);
		info.etime =q.getFullYear()+"."+xs(q.getMonth()+1)+"."+xs(q.getDate())+ " "+xs(q.getHours())+":"+xs(q.getMinutes());
		function xs(n){ return n<10?("0"+n):n;}
			var html = template('test', data);
			document.getElementById('box').innerHTML = html;
			if(typeof jw == "object") {
			    jw.api('copy_current_url', JSON.stringify({'status': false}));
			    jw.api('share_button', JSON.stringify({'status': true}));
			    jw.api('set_share_info', JSON.stringify({
			      'title': data.result.matchInfo.name,
			      'description':data.result.matchInfo.aim_desc,
			      'img_url':'http://irun.hupu.com/static/images/share/icon.png',
			      'link_url':'http://irun.hupu.com/show/matchInfo?match_id='+data.result.matchInfo.match_id,
			    }));
			  }
			info.stime = (Date.parse(new Date(info.stime.replace('.','/').replace('.','/'))).toString()).substr(0,10);
		    info.etime =( Date.parse(new Date(info.etime.replace('.','/').replace('.','/'))).toString()).substr(0,10);
		    if(sup){
		    	$(".dow-app").hide();
		    }
		    if(infoM.status==1){
		    	$(".me").html("我已报名");
		    	$(".me").attr("href","#");
		    	$(".me").addClass("btn-style");
		    }else{
		    	$(".me").attr("href","{$staticHost}/show/matchApply?match_id={$match_id}")
		    }

		    if(info.template_id==1){
		    	$("body").removeClass();
		    	$("body").addClass('style-two')
		    }else if(info.template_id==2){
		    	$("body").removeClass();
		    	$("body").addClass('style-three')
		    }else{$("body").removeClass()}

		    $("title").html(data.result.matchInfo.name);
		    var LisA = $(".a-list a").length;
		    if(LisA == 3){
		    	$(".a-list a:last-child").css("width","94%")
		    }
		   if(!uid){
			   	$(".nlogin").click(function(){
					$(this).removeAttr("href"); 
					$("#forlogin").show();
					$(".login-pop").show();
				})
		   	// 判断有没有登录
		   	}
		   	if(info.match_type==0){
	   			$("#qz").remove()
	   		}else if(info.match_type==1){
	   			$("#gr").remove()
	   		}
	   		if(info.status==0){
	   			$("#bar-line").css("width","15%");			//活动 进度条
				$("#jc").html("报名中");					//进程文本
				$("#one").removeClass();
				$(".nlogin").click(function(){
					$(this).attr("href","#"); 
				})
	   		}
	   		if(info.status==4){
	   			$("#jc").html("已取消");					//进程文本
				$(".nlogin").click(function(){
					$(this).attr("href","#"); 
				})
	   		}
	   		if(info.status==1){								//活动报名中
				$("#bar-line").css("width","15%");			//活动 进度条
				$("#jc").html("报名中");					//进程文本
				$("#one").removeClass();					//改变 进度条 圆点状态


				
				// 判断用户是否报名
				$(".group").click( function () {			//判断用户报名
					if(data.result.groupCanJoin==1){				
						$(".apply-pop").hide();
						$(".applyg-pop").show();
						$("#forlogin").show();
						$("#select-mod").show();
					}
				});
				// 判断群组是否报名

				$(".rank,.data").click(function(){
					if(infoM.status!=1&&data.result.groupCanJoin==1){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("小主，您要先报名哦 ");
						$(".no-pop").show();
					}else{
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("活动还没开始，没有数据哦");
						$(".no-pop").show();
					}
				})
				//数据排行查看权限
			}else if(info.status==2){
				$("#bar-line").css("width","50%");
				$("#jc").html("进行中");
				$("#one").removeClass();
				$("#two").removeClass();
				$(".me",".group").removeClass("nlogin");

	   			$(".me").addClass("btn-style");
	   			$(".me").attr("href","#");
                $(".group").addClass("btn-style");
	   			$(".rank").click(function(){
					if(infoM.status!=1&&infoM.group_add_info.length==0){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("小主，您没有报名呢，下次记得报名");
						$(".no-pop").show();
					}
				})
                $(".data").click(function(){
                    var now = parseInt((new Date()).getTime()/1000)
					if(infoM.status!=1&&infoM.group_add_info.length==0){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("小主，您没有报名呢，下次记得报名");
						$(".no-pop").show();
					}else if(now < info.etime+3600){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("扑妞努力计算中 <br/>请小主赛事结束一小时后再来");
						$(".no-pop").show();
                    }
                })
			}else if(info.status==3){
				$("#bar-line").css({"width":"100%"});
				$("#jc").html("已结束");
				$(".bar span").removeClass();
				$(".me").removeClass("nlogin");
				$(".group").removeClass("nlogin");
				$(".me").addClass("btn-style");
				$(".me").attr("href","#");
				$(".group").addClass("btn-style");
	   			$(".rank").click(function(){
					if(infoM.status!=1&&infoM.group_add_info.length==0){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("小主，您没有报名呢，下次记得报名");
						$(".no-pop").show();
					}
				})
                $(".data").click(function(){
                    var now = parseInt((new Date()).getTime()/1000)
                    var etime = parseInt(info.etime)+3600
                  	if(infoM.status!=1&&infoM.group_add_info.length==0){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("小主，您没有报名呢，下次记得报名");
						$(".no-pop").show();
					}else if(now <etime){
						$(this).attr("href","#");
						$("#forlogin").show();
						$(".no-pop p").html("扑妞努力计算中 <br/>请小主赛事结束一小时后再来");
						$(".no-pop").show();
                    }
                })
			}
		   $(".buy").click( function () {
				var total = $("#total").html()
				var spNum = $(".spNum").html()
				if(total==0.00||spNum==0){
					$("#forlogin").show();

					$(".no-pop p").html("请选购商品");
					$(".no-pop").show();
					return false;
				}
			});
		    if(info.status!=1&&infoM.status==1&&infoM.group_add_info.length==0){
				$(".buy").attr("disabled",true)
			    $(".buy").css("background","#adadb3")
			}

			$(".info").click( function () {
				if(infoM.status!=1&&data.result.groupCanJoin==1){
					$("#forlogin").show();
					$(".no-pop p").html("小主，您没有报名");
					$(".no-pop").show();
				}else{
					$("#forlogin").show();
					$(".applyg-info").show();
					$(".applyg-info div").show();
				}
			});
			// 用户查看 报名信息
			// 判断是否登录
			if(infoM!=null&&infoM.status==1){
				$(".me").attr("href","#");
				$(".me").addClass("btn-style");
				$(".me").html("我已报名");
			}
			if(infoM!=null&&data.result.groupCanJoin==0){
				$(".group").attr("href","#");
				$(".group").addClass("btn-style");
				$(".group").html("群组已报名");
			}
			// 判断报名按钮状态
			$("#grbm").click(function(){
				if(infoM.status==1){
			      	$("#forlogin").hide();
					$("#forlogin div").hide();
					$(".me").attr("href","#");
					$(".me").html("我已报名");
					$(".me").addClass("btn-style");
	              	window.location.reload()
		        }
			})
			// 用户报名信息提交
			$("#qzbm").click(function(){
				window.location.reload()
				var params = {"match_id":match_id}
				params.type = 'group'
				params.gid = $("#inValue").val();
				$.post("/matchWeb/joinMatch",params,
			    function(data,status){

			      data = JSON.parse(data)
			      if(data.result.is_success){
			      	$("#forlogin").hide();
					$("#forlogin div").hide();
					$(".group").addClass("btn-style");
					$(".group").html("群组已报名");
                   	window.location.reload()
			      }else{
			      	$(".applyg-pop").hide()
			      	$(".failure-pop").show();
			      }
			    });
			})
			// 群组报名信息提交
			$(".nlogin").click(function(){
				var display =$('#forlogin').css('display');
				if(display == 'block'){
			 	  $(document.body).css({
			   			"overflow-y":"hidden",
			   			"height":"100%"
					});
				}
			})
			$("#select-mod").click( function () {
				$(".select").toggle(300); 
				$(".commodity").show()
			});
			$(".select li").click(function(){
				var modValue = $(this).data('gid')
				var modText = $(this).text();
				$("#select-mod").text(modText);
				$(".select").hide(100); 
				$("#inValue").val(modValue);
			
			});
	 		// 下拉列表
			$(".arrows-down").click(function(){
	 			$("#forlogin").show();
	 		})
	 		var numHtml=$("#num").html();
	 		$("#cutNum").click(function(){
	 			$("#num").text(numHtml-1);
	 		})
	 		$("#addNum").click(function(){
	 			$("#num").text(numHtml+1);
	 		})
	
			$(".close").click( function(){
				$(".pop-up").show();
				$("#forlogin").hide();
				$("#forlogin div").hide();
				$(".pop-commodity").hide();
				// window.location.reload()
				
			});
			// 关闭弹框
			var timestamp = parseInt((new Date()).getTime()/1000)
			function GetRTime(){
			  	var Tt =  info.stime;
			  	var t =Tt - timestamp;
			    var d=0, h=0, m=0;
			    if(t>=0){
			      d=Math.floor(t/60/60/24);
			      h=Math.floor(t/60/60%24);
			      m=Math.floor(t/60%60);

			    }else{
			    	
			    	clearInterval(id);
				}
			    
				if (d==0&&h==0&&m==0) {
			    	$(".count").hide();
			    	
			    }
			     if (d<10) {
			     	d = '0'+d
			     }
			     if (h<10) {
			     	h = '0'+h
			     }
			     if (m<10) {
			     	m = '0'+m
			     }
			    $("#t_d").text(d);
			    $("#t_h").text(h);
			    $("#t_m").text(m);
			   }
			var id=setInterval(GetRTime,0);

			// 倒计时
		});
	});
	  




	</script>

{template 'show/web-footer'}
